<template>
         <div class="main">
             <ul>
                 <li v-for='(item,index) in dataList' @click='toLittleBox(index)' :class='{otherColor:parseInt(index/6)%2 == 1,searchColor:index == isIndex}'>{{item}}</li>
             </ul>
             <p class="nullContent" v-show='nullContent'>暂无数据</p>
         </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                dataList: [],
                nullContent: false,
                isHave: false,
                isIndex: null,
                parentCode: this.$store.state.stockManage.bigParentCode,
                bigParentStaticCode: this.$store.state.stockManage.bigParentStaticCode,
                midBoxPostData: this.$store.state.stockManage.midBoxPostData
            }
        },
        created: function() {
            console.log(this.parentCode)
            this.$root.eventHub.$on('midCodeSearch', (o) => {
                this.isHave = false;
                for (let i = 0; i < this.dataList.length; i++) {
                    if (o == this.dataList[i]) {
                        this.isHave = true;
                        this.isIndex = i;
                        break;
                    } else {
                        this.isIndex = null;
                    }
                }
                if (this.isHave == false) {
                    this.$message('没有找到哦');
                }
            });
            if (this.parentCode == '') {
                this.getMidBoXList(this.midBoxPostData);
            } else {
                this.getChildBoXList(this.parentCode);
            }
            this.$store.state.stockManage.codeBox = 2;
        },
        methods: {
            getChildBoXList: function(parentCode) {
                this.$store.commit('showLoading');
                this.getFindChildCodeList({
                    parentCode: parentCode
                }).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        this.dataList = data.data;
                        if (data.data.length == 0) {
                            this.nullContent = true;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg))
            },
            getMidBoXList: function(list) {
                this.$store.commit('showLoading');
                this.getMaxPackingCodeList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        this.dataList = data.data;
                        if (data.data.length == 0) {
                            this.nullContent = true;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg))
            },
            // 显示小箱码
            toLittleBox: function(i) {
                let parentCode = this.dataList[i];
                this.$store.commit('toLittleBox', {
                    index: i,
                    parentCode: parentCode
                });
            },
            ...mapActions(['getMaxPackingCodeList', 'getFindChildCodeList'])
        },
        beforeDestroy: function() {
            this.$root.eventHub.$off('midCodeSearch');
        }
    }

</script>
<style scoped>
    .main {
        width: 100%;
        background-color: #fff;
        min-width: 1290px;
        margin: 10px 0 0;
        margin-top: 10px;
    }
    
    ul {
        margin: 0;
        padding: 0;
        border-top: 1px solid #ddd;
        overflow: hidden;
    }
    
    li {
        float: left;
        width: 16.66%;
        height: 64px;
        line-height: 64px;
        text-align: center;
        color: #43DCE7;
        cursor: pointer;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        background-color: #fff;
    }
    
    li:nth-child(6n) {
        border-right: none;
    }
    
    .otherColor {
        background-color: #FBFBFB;
    }
    
    .searchColor {
        background-color: #1CAFBA;
        color: #fff;
    }

</style>
